#include('./header.html',{has_sub:'other', active:'categories', title:'分类管理'})
<div id="app" class="row" v-cloak>
    <loading :active.sync="isLoading" :can-cancel="true"></loading>
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">分类/标签管理</h3>
            </div>
            <div class="panel-body">

                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-color panel-purple">
                            <div class="panel-heading">
                                <h1 class="panel-title" style="line-height:20px;">分类列表</h1>
                            </div>
                            <div class="panel-body">
                                <div class="btn-group m-b-10" v-for="(item, index) in categories">
                                    <button v-if="item.name == '默认分类'" type="button" :class="'btn btn-'+ randomColor() +' waves-effect waves-light'">
                                        {{item.name}} ({{item.count}})
                                    </button>
                                    &nbsp;
                                    <button v-if="item.name != '默认分类'" type="button"
                                            :class="'btn btn-'+ randomColor() +' waves-effect waves-light'"
                                            data-toggle="dropdown" aria-expanded="false">{{item.name}} ({{item.count}}) <span
                                            class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                            <a class="edit-category" @click="edit(index)">修改</a>
                                        </li>
                                        <li>
                                            <a class="del-category" @click="deleteCategory(item.mid)">删除</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel panel-color panel-purple">
                            <div class="panel-heading">
                                <h1 class="panel-title" style="line-height:20px;">标签列表</h1>
                            </div>
                            <div class="panel-body">
                                <div class="btn-group m-b-10" v-for="item in tags">
                                    <button type="button" :class="'btn btn-'+ randomColor() +' waves-effect waves-light'" data-toggle="dropdown" aria-expanded="false">
                                        {{item.name}} ({{item.count}}) <span class="caret"></span>
                                    </button>
                                    &nbsp;
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a class="del-category" @click="deleteCategory(item.mid)">删除</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <form id="cform" class="form-inline" role="form">
                                    <input type="hidden" v-model="mid"/>
                                    <div class="form-group">
                                        <input type="text" class="form-control" v-model="cname" placeholder="请输入分类名称">
                                    </div>
                                    <button type="button" class="btn btn-success waves-effect waves-light m-l-10" @click="save">
                                        保存分类
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
#include('./footer.html')
<script >

    var tale = new $.tale();
    var vm = new Vue({
        el: '#app',
        data: {
            mid: '',
            cname:'',
            categories: [],
            tags: [],
            isLoading: true
        },
        beforeCreate: function(){
            vueLoding = this.$loading.show();
        },
        mounted: function () {
            this.load();
        },
        methods: {
            load: function () {
                var $vm = this;
                tale.get({
                    url: '/admin/api/categories',
                    success: function (data) {
                        $vm.categories = data.payload
                    },
                    error: function (error) {
                        console.log(error);
                        alert(error || '数据加载失败');
                    }
                });
                tale.get({
                    url: '/admin/api/tags',
                    success: function (data) {
                        $vm.tags = data.payload
                    },
                    error: function (error) {
                        console.log(error);
                        alert(error || '数据加载失败');
                    }
                });
            },
            save: function () {
                var $vm = this;
                if($vm.cname === ''){
                    tale.alertError('请输入分类名');
                    return;
                }
                tale.post({
                    url: '/admin/api/category/save',
                    data: {mid: $vm.mid, cname: $vm.cname},
                    success: function (result) {
                        if (result && result.success) {
                            tale.alertOk('保存成功');
                            $vm.mid = '';
                            $vm.cname = '';
                            $vm.load();
                        } else {
                            tale.alertError(result.msg || '保存失败');
                        }
                    }
                });
            },
            edit: function(index){
                var item = this.categories[index];
                this.mid = item.mid;
                this.cname = item.name;
            },
            deleteCategory: function (mid) {
                var $vm = this;
                tale.alertConfirm({
                    title: '确定删除该项吗?',
                    then: function () {
                        tale.post({
                            url: '/admin/api/category/delete/' + mid,
                            success: function (result) {
                                if (result && result.success) {
                                    tale.alertOk('删除成功');
                                    $vm.load();
                                } else {
                                    tale.alertError(result.msg || '删除失败');
                                }
                            }
                        });
                    }
                });
            }
        }
    });

    $(document).ready(function () {
        vm.isLoading = false;
        vueLoding.hide();
    });

</script>
</body>
</html>